<template>
  <div class="footer">
    <div class="footer-inner container">
      <div class="flex partner">
        <div v-for="item in dataList.links" :key="item.name">
          <a :href="item.url" target="_blank" class="link-item">
            {{ item.name }}
          </a>
        </div>
      </div>

      <div class="other">
        <img src="@/assets/home/footer-logo.png" class="footer-logo" />
        <ul
          class="other-list"
          v-if="dataList.footerNavList && dataList.footerNavList.length"
        >
          <li v-for="item in dataList.footerNavList" :key="item.text">
            <a :href="item.url" target="_blank">{{ item.text }}</a>
            <el-divider direction="vertical" v-if="!item.hidden" />
          </li>
        </ul>
      </div>
    </div>

    <div class="copyright">
      <span>京公网安备 11010202007836号</span>
      <span>Copyright©2014-2019 高等教育出版社 京ICP备12020869号-19</span>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeMount, onMounted, reactive } from "vue";
  import { getPartnerLink } from "@/api/home";
  import config from "@/utils/index.js";

  const dataList = reactive({
    links: [],
    footerNavList: [
      {
        text: "开通项目申请表",
        url: "https://zyk.icve.com.cn/application",
      },
      {
        text: "平台简介",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=1",
      },
      {
        text: "知识产权",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=2",
      },
      {
        text: "免责声明",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=3",
      },
      {
        text: "意见反馈",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=4",
      },
      {
        text: "联系我们",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=5",
      },
      {
        text: "积分说明",
        url: "https://www.icve.com.cn/portal_new/platform/platform.html?page=6",
      },
      {
        text: "隐私政策",
        url: "https://www.icve.com.cn/portal_new/platform/policy.html",
        hidden: true,
      },
      {
        text: "疫情防控在线教学方案",
        url: "https://help.icve.com.cn/jjxx",
        hidden: true,
      },
    ],
  });
  const goDetail = (url) => {
    window.open(url);
  };
  const getPartnerLinkFunc = async () => {
    const { list = [] } = await getPartnerLink({
      projectId: config.projectId,
    });
    dataList.links = list;
  };

  onBeforeMount(() => {
    getPartnerLinkFunc();
  });
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }
  .flex-1 {
    flex: 1;
  }
  a {
    color: #969696;
  }
  @media screen and (min-width: 1200px) {
    .footer {
      width: 100%;
      min-width: 1154px;
      background: #000;
      color: #969696;
      position: relative;
      z-index: 100;
      &-inner {
        width: 1440px;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
      .partner {
        width: 434px;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        .link-item {
          display: inline-block;
          width: 196px;
          line-height: 30px;
          vertical-align: middle;
          &:hover {
            color: #ffffff;
          }
        }
      }
      .other {
        width: 695px;
        text-align: center;
        .footer-logo {
          width: 176px;
          height: 33px;
          margin: 52px auto 35px;
          display: block;
        }
        ul {
          width: 100%;
          line-height: 30px;
          display: flex;
          flex-wrap: wrap;
          text-align: right;
          font-size: 14px;

          li {
            cursor: pointer;
            .el-divider {
              margin: 0 10px;
              border-color: #969696;
            }
            &:hover {
              color: #ffffff;
            }
          }
        }
      }
      .copyright {
        width: 100%;
        padding-left: 84px;
        line-height: 42px;
        text-align: center;
        font-size: 14px;
        border-top: 1px solid #323232;
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .footer {
      width: 100%;
      min-width: 95vw;
      background: #000;
      color: #969696;
      position: relative;
      z-index: 100;
      &-inner {
        margin: 0 auto;
        padding: 4vw;
        font-size: 2vw;
        justify-content: space-between;
      }
      .partner {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        .link-item {
          display: inline-block;
          width: 45vw;
          line-height: 6vw;
          vertical-align: middle;
          &:hover {
            color: #ffffff;
          }
        }
      }
      .other {
        width: 100%;
        text-align: center;
        .footer-logo {
          width: 45vw;
          margin: 8vw auto;
          display: block;
        }
        ul {
          width: 100%;
          line-height: 2;
          display: flex;
          flex-wrap: wrap;
          text-align: right;
          font-size: 2vw;

          li {
            cursor: pointer;
            .el-divider {
              margin: 0 2vw;
              border-color: #969696;
            }
            &:hover {
              color: #ffffff;
            }
          }
        }
      }
      .copyright {
        width: 100%;
        line-height: 2;
        padding: 2vw 0;
        text-align: center;
        font-size: 2vw;
        border-top: 1px solid #323232;
      }
    }
  }
</style>
